<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>Sortable. No jQuery.</title>
	<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
	<link href="st/app.css" rel="stylesheet" type="text/css"/>
</head>
<body>

	<!-- Connected lists -->
	<div class="container" style="height: 520px">
		<!-- <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
			<div class="layer title">List A</div>
			<ul id="foo" class="block__list block__list_words">
				<li>бегемот</li>
				<li>корм</li>
				<li>антон</li>
				<li>сало</li>
				<li>железосталь</li>
				<li>валик</li>
				<li>кровать</li>
				<li>краб</li>
			</ul>
		</div> -->

		<div data-force="18" class="layer block">
			<ul id="bar" class="block__list block__list_tags">
				<li class="w1">1</li>
				<li class="w2">2</li>
				<li class="w3">3</li>
				<li class="w1">4</li>
				<li class="w2">5</li>
				<li class="w3">6</li>
				<li class="w1">7</li>
				<li class="w2">8</li>
				<li class="w3">9</li>
			</ul>
		</div>
	</div>


	<!-- Multi connected lists -->
	<!-- <a name="m"></a>
	<div class="container">
		<div id="multi" style="margin-left: 30px">
			<div><div data-force="5" class="layer title title_xl">Multi</div></div>
	
			<div class="layer tile" data-force="30">
				<div class="tile__name">Group A</div>
				<div class="tile__list">
					<img src="st/face-01.jpg"/><img src="st/face-02.jpg"/><img src="st/face-03.jpg"/><img src="st/face-04.jpg"/>
				</div>
			</div>
	
			<div class="layer tile" data-force="25">
				<div class="tile__name">Group B</div>
				<div class="tile__list">
					<img src="st/face-05.jpg"/><img src="st/face-06.jpg"/><img src="st/face-07.jpg"/>
				</div>
			</div>
	
			<div class="layer tile" data-force="20">
				<div class="tile__name">Group C</div>
				<div class="tile__list">
					<img src="st/face-08.jpg"/><img src="st/face-09.jpg"/>
				</div>
			</div>
	
		</div>
	</div> -->


	<!-- Editable list -->
	<!-- <a name="e"></a>
	<div class="container" style="margin-top: 100px">
		<div id="filter" style="margin-left: 30px">
			<div><div data-force="5" class="layer title title_xl">Editable list</div></div>

			<div style="margin-top: -8px; margin-left: 10px" class="block__list block__list_words">
				<ul id="editable">
					<li>Оля<i class="js-remove">✖</i></li>
					<li>Владимир<i class="js-remove">✖</i></li>
					<li>Алина<i class="js-remove">✖</i></li>
				</ul>

				<button id="addUser">Add</button>
			</div>
		</div>
	</div> -->


	<!-- Advanced connected lists -->
	<!-- <a name="ag"></a>
	<div class="container" style="margin-top: 100px;">
		<div id="advanced" style="margin-left: 30px;">
			<div><div data-force="5" class="layer title title_xl">Advanced groups</div></div>

			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
				<div class="block__list-title">pull & put</div>
				<ul id="advanced-1">
					<li>Meat</li>
					<li>Potato</li>
					<li>Tea</li>
				</ul>
			</div>

			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
				<div class="block__list-title">only pull (clone) no&nbsp;reordering</div>
				<ul id="advanced-2">
					<li>Sex</li>
					<li>Drugs</li>
					<li>Rock'n'roll</li>
				</ul>
			</div>

			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
				<div class="block__list-title">only put</div>
				<ul id="advanced-3">
					<li>Money</li>
					<li>Force</li>
					<li>Agility</li>
				</ul>
			</div>

			<div style="clear: both"></div>
		</div>
	</div> -->


	<!-- 'handle' option -->
	<!-- <a name="h"></a>
	<div class="container" style="margin-top: 100px;">
		<div id="handle" style="margin-left: 30px;">
			<div><div data-force="5" class="layer title title_xl">Drag handle and selectable text</div></div>
	
			<div style="width: 30%; margin-left: 10px" class="block__list_words">
				<ul id="handle-1">
					<li><span class="drag-handle">&#9776;</span>Select text freely</li>
					<li><span class="drag-handle">&#9776;</span>Drag my handle</li>
					<li><span class="drag-handle">&#9776;</span>Best of both worlds</li>
				</ul>
			</div>
	
			<div style="clear: both"></div>
		</div>
	</div> -->


	


	<!-- Code example -->
	<!-- <a name="c"></a>
	<div class="container" style="margin-top: 100px">
		<div style="margin-left: 30px">
			<div><div class="layer title title_xl">Code example</div></div>
			<pre data-force="100" class="layer javascript" style="margin-top: -8px; margin-left: 10px; width: 90%">
				<code>
					// Simple list
					var list = document.getElementById("my-ui-list");
					Sortable.create(list); // That's all.
	
	
					// Grouping
					var foo = document.getElementById("foo");
					Sortable.create(foo, { group: "omega" });
	
					var bar = document.getElementById("bar");
					Sortable.create(bar, { group: "omega" });
	
	
					// Or
					var container = document.getElementById("multi");
					var sort = Sortable.create(container, {
					  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
					  handle: ".tile__title", // Restricts sort start click/touch to the specified element
					  draggable: ".tile", // Specifies which items inside the element should be sortable
					  onUpdate: function (evt/**Event*/){
					     var item = evt.item; // the current dragged HTMLElement
					  }
					});
	
					// ..
					sort.destroy();
	
	
					// Editable list
					var editableList = Sortable.create(editable, {
					  filter: '.js-remove',
					  onFilter: function (evt) {
					    var el = editableList.closest(evt.item); // get dragged item
					    el && el.parentNode.removeChild(el);
					  }
					});
				</code>
			</pre>
		</div>
	</div> -->



	<script src="Sortable.js"></script>
	<script src="http://cdn.bootcss.com/angular.js/1.2.32/angular.min.js"></script>

	<script src="st/app.js"></script>



	<!-- highlight.js -->
	<!-- <style>
		/* Tomorrow Theme */
		/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
		/* Original theme - https://github.com/chriskempson/tomorrow-theme */
		/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
		.tomorrow-comment, pre .comment, pre .title {
		  color: #8e908c;
		}

		.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
		  color: #c82829;
		}

		.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
		  color: #f5871f;
		}

		.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
		  color: #eab700;
		}

		.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
		  color: #718c00;
		}

		.tomorrow-aqua, pre .css .hexcolor {
		  color: #3e999f;
		}

		.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
		  color: #4271ae;
		}

		.tomorrow-purple, pre .keyword, pre .javascript .function {
		  color: #8959a8;
		}

		pre {
			border: 0;
			background-color: #fff;
		}

		pre code {
		  display: block;
		  color: #4d4d4c;
		  font-size: 15px;
		  font-family: Menlo, Monaco, Consolas, monospace;
		  line-height: 1.5;
		  padding: 30px;
		}
	</style> -->


	
</body>
</html>
